<template>
  <div class="zuti_container">
    <el-card>
      <!-- 顶部搜索栏 -->
      <el-form ref="form" label-width="80px">
        <el-row type="flex" justify="space-between" :inline="true">
          <el-form-item label="关键字" style="margin-right: 40px">
            <el-input
              style="width: 140%"
              v-model="queryData.keyword"
              placeholder="请输入关键字"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              size="small"
              type="primary"
              @click="initData"
              >搜索</el-button
            >
            <el-button
              icon="el-icon-refresh"
              size="small"
              type="reset"
              @click="(queryData = { page: 1, pagesize: 5 })(initData())"
              >清除</el-button
            >
          </el-form-item>
          <div style="flex: 1"></div>
        </el-row>
      </el-form>
      <el-alert :closable="false" :title="`数据一共${count}条`" type="info">
      </el-alert>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" align="center" label="编号" width="80">
        </el-table-column>
        <el-table-column
          prop="questionType"
          align="center"
          label="题型"
          width="130"
        >
          <template slot-scope="{ row }">
            {{
              row.questionType == 1
                ? "单选"
                : row.questionType == 2
                ? "多选"
                : "简答"
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="题目编号"
          width="180"
        >
          <template slot-scope="{ row }">
            <a href="javascript:;" @click="yulan(row)">
              {{ row.number }}
            </a>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          align="center"
          label="录入时间"
          width="280"
        >
          <template slot-scope="{ row }">
            <span
              >{{ $moment(row.addDate).format("YYYY-MM-DD hh:mm:ss") }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="addDate"
          align="center"
          label="答题时间"
          width="280"
        >
          <template slot-scope="{ row }">
            <span
              >{{ $moment(row.addDate).format("YYYY-MM-DD hh:mm:ss") }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="id" align="center" label="正确率">
          <template slot-scope="{ row }">
            <span> {{ Math.floor(Math.random() * (100 - 0)) + 0 }}%</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="creator"
          align="center"
          label="录入人"
          width="180"
        >
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="{ row }">
            <el-button
              size="small"
              type="danger"
              plain
              @click="del(row.id)"
              circle
              icon="el-icon-delete"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end">
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryData.page"
          :page-sizes="[3, 5, 8]"
          :page-size="queryData.pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </el-row>
    </el-card>
    <QuestionsInfo ref="QuestionsInfo"></QuestionsInfo>
  </div>
</template>

<script>
import {
  getQuerstionsList,
  getQuestionsInfoApi,
  delQuestionsApi,
} from "@/api/Questions";
import QuestionsInfo from "@/views/tiku/jingxuan/components/QuestionsInfo";
export default {
  name: "ZUTI",
  components: {
    QuestionsInfo,
  },
  data() {
    return {
      tableData: [],
      queryData: {
        page: 1,
        pagesize: 5,
      },
      count: 0,
    };
  },
  created() {
    this.initData();
  },
  methods: {
    async yulan(val) {
      // console.log(val);
      if (
        val.id == "" ||
        val.catalogID == "" ||
        val.catalog == null ||
        val.enterprise == ""
      ) {
        return this.$message.warning("当前题目不可预览");
      } else {
        // console.log(val);
        //查询单条数据
        const res = await getQuestionsInfoApi(val.id);
        // console.log(res);
        //赋值给弹框根数组
        this.$refs.QuestionsInfo.list = res;
        this.$refs.QuestionsInfo.options = res.options;
        // 拿到单挑数据中已经勾选的数据（已勾选的状态是1）
        let abc = res.options.filter((item) => item.isRight == 1);
        // console.log(abc);
        //根据类型判断如果是简答题则给show滞空，否则把选中的id传过去
        if (res.questionType == 3) {
          this.$refs.QuestionsInfo.show = "";
        } else {
          this.$refs.QuestionsInfo.show = abc[0].id;
        }
        // 获取选中的数据如果数据大于一条那么就把他定义为多选框，拿到数据后传给 checkShow
        let sum = res.options.filter((item) => item.isRight == 1);
        let arr = [];
        if (sum.length > 1) {
          sum.forEach((element) => {
            arr.push(element.id);
          });
          this.$refs.QuestionsInfo.checkShow = arr;
        }
        this.$refs.QuestionsInfo.dialogShow = true;
      }
    },

    async initData() {
      const res = await getQuerstionsList(this.queryData);
      // console.log(res, "组题");
      this.count = res.counts;
      this.tableData = res.items;
    },
    //分页器条数发生变化
    async handleSizeChange(val) {
      // console.log(val);
      this.queryData.pagesize = val;
      await this.initData();
    },
    //分页器页数变化
    async handleCurrentChange(val) {
      this.queryData.page = val;
      await this.initData();
    },
    //删除
    async del(id) {
      try {
        await this.$confirm("你确定删除当前题目吗？");
        await delQuestionsApi(id);
        this.$message.success("删除成功");
      } catch (error) {
        console.log(error);
        // this.$message.error("删除失败");
      }
      this.initData();
    },
  },
};
</script>

<style lang="scss" scoped>
.zuti_container {
  padding-top: 18px;
  a {
    text-decoration: none;
  }
}
</style>